<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ include file='../Templates/security.jsp' %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<script type="text/javascript">
    var id_puestoVig = "";
    var nombrePuesto = "";
    var id_area = "";
    var sede = "";
    // Estas no cambian
    var offset = 0;
    var tam = 0;
    var limit = 0;
    var order = "";
    
    consultarPuestoVigs();

    function consultarPuestoVigs(){
        $.getJSON("listaTodosPuestoVigAction.do",{id_puestoVig: id_puestoVig,
            nombrePuesto: nombrePuesto, id_area: id_area,
            sede: sede, limit: limit, offset: offset,order: order},
        function(data) {
            if(limit != 0){
                $('#resultado').empty();
                var fila;
                // Esto se hace para pintar el fondo de las filas pares e impares. (NO CAMBIA)
                $.each(data.consultarPuestoVig1 , function(i,item){
                    //tam = item.tam;
                    if ( (i % 2) == 0){
                        fila = "<tr bgcolor = \"#fff\"> ";
                    }
                    else{
                        fila = "<tr bgcolor = \"#ecf2f6\">";
                    }
                    var string = fila+"</td><td>"+
                        item.nombrePuesto+"</td><td>"+
                        item.id_area+"</td><td>"+
                        item.sede;
                    if (item.estado_puesto == "t"){
                           string += "</td><td ><img onclick=' modificarPuestoVig(\""+item.id_puestoVig+"\");' src='style/images/table_edit1.png' alt='Modificar Puesto' ></td>"+
                               "</tr>";
                    //        "</td><td ><img onclick=' desactivarPuesto(\""+item.id_puestoVig+"\");' src='Modulo1/images/desactivar.png' alt='Desactivar Puesto' ></td></tr>";
                    }else{
                          //  string += "</td><td ></td>"+
                         //   "</td><td ><img onclick=' activarPuesto(\""+item.id_puestoVig+"\");' src='Modulo1/images/activar.png' alt='Activar Puesto' ></td></tr>";
                    }
                     
                    fila++;
                    $('#resultado').append(string);
                    
                });
            }
            else{
                // Se pinta la tabla en la página. (Cambia en todos los script)
                // Lo unico que cambia en todos los script es el llamado a la función.
                $.each(data.consultarPuestoVig1 , function(i,item){
                    tam = parseInt(item.tam);
                });
                limit = 10;
            }
        }
    );
        if(limit!=0){
            $("#currentpage").empty();
            $("#pagelimit").empty();
            $("#currentpage").append((offset/limit)+1);
            $("#pagelimit").append(Math.floor((tam-1)/limit)+1);
        }
    }

    function setId_puestoVig(id_puestoViga){
        id_puestoVig = id_puestoViga;
        consultarPuestoVigs();
    }
    function setNombrePuesto(nombrePuestoa){
        nombrePuesto = nombrePuestoa;
        consultarPuestoVigs();
    }
    function setId_area(id_areaa){
        id_area = id_areaa;
        consultarPuestoVigs();
    }
    function setSede(sedea){
        sede = sedea;
        consultarPuestoVigs();
    }
    function ord(ord,key){
        order = "order by "+key+" "+ord+" ";
        consultarPuestoVigs();
    }
    // Se fija el número de páginas totales de la consulta (NO CAMBIA)
    function setLimit(piso){
        offset = 0;
        limit = parseInt(piso);
        consultarPuestoVigs();
    }

    // Se fijan los alcances de las flechas primera, última, siguiente y anterior (NO CAMBIA)
    function setOffset(i, completo){
        if(completo && (i==-1)){
            offset = 0;
        }
        else if(completo && (i==1)){
            offset = Math.floor((tam-1)/limit)*limit;
        }
        else if(!completo && i==-1){
            if(offset>=limit){
                offset -= limit;
            }
        }
        else{ //!completo && i==1
            if(offset<tam-limit){
                offset += limit;
            }
        }
        consultarPuestoVigs();
    }
</script>
<script type="text/javascript">
    // Este script determina que la primera vez que se ve la tabla (sin resultados),
    // el numero de paginas y la pagina actual serán 1. (NO CAMBIA)
    if(limit == 0){
        $("#currentpage").append(1);
        $("#pagelimit").append(1)
    }
</script>

<h1 class="title">Gestión de Puestos de Vigilancia</h1>
<hr>
<p class="meta"></p>
<center>
    <h2>Consultar Puestos de Vigilancia</h2>
        <div class="formularioPuesto">
            <table>
                <tbody>
                <tr>
                        <td>Sede :</td>
                        <td>
                            <select id="sede" name ="sede" onchange="setSede(value)">
                            <script type="text/javascript">
                                $.getJSON("listaSedeAction.do",
                                function(data) {
                                    $.each(data.consultarSede, function(i,item){
                                        var string = "<option value='"+item.nombre+"'>"+item.nombre+"</option>";
                                        $('#sede').append(string)
                                    });
                                });
                            </script>
                            <option value="">Cualquiera</option>
                        </select>
                        </td>
                    </tr>
                    

                </tbody>
            </table>
            <br>
            <html:button property="" styleId="novedadesAreas" value="  Atrás  "/>
            <html:button property="" value="  Mostrar Todo  " onclick="consultarPuestoVigs()"/>
            <br><div style="clear: both;">&nbsp;</div><br>
        </div>


<div id="consultarPuestoVig0" style="overflow:auto">

        <table cellpadding="0" cellspacing="0" border="0" id="table" class="sortable"  >
            <thead>
                <tr>                    
            <th><h14>Puesto</h14></th>
            <th><h14>Area</h14></th>
            <th><h14>Sede</h14></th>
            <th><h14>Modificar</h14>
            <!--<th><h14>Estado</h14></th>  Agregar esta linea -->
            </tr>
            </thead>
            <tbody id="resultado">
            </tbody>

        </table>

    </div>
    <div style="clear: both;">&nbsp;</div>


    <%-- Aquí se manejan las flechas, cantidad de paginas a mostrar y numero de pagina --%>
    <%-- esto no es necesario cambiarlo --%>
    <%@ include file="../Templates/paginasTabla.jsp" %>


</center>

